<template>
  <!-- 查询区块 -->
  <el-card>
    <el-row :gutter="20">
      <!-- 搜索框 -->
      <el-col :span="6">
        <el-input
          v-model.trim="formParams.input"
          style="max-width: 600px"
          class="input-with-select"
          placeholder="请输入站点名称/ID"
        >
          <template #append>
            <el-select v-model="select" style="width: 115px">
              <el-option label="按名称查询" value="name" />
              <el-option label="按ID查询" value="id" />
            </el-select>
          </template>
        </el-input>
      </el-col>
      <!-- 充电桩状态选择 -->
      <el-col :span="6">
        <el-select placeholder="充电桩状态" v-model="formParams.value">
          <el-option label="全部" :value="1" />
          <el-option label="使用中" :value="2" />
          <el-option label="空闲中" :value="3" />
          <el-option label="维护中" :value="4" />
          <el-option label="待维修" :value="5" />
        </el-select>
      </el-col>
      <!-- 查询和重置按钮 -->
      <el-col :span="6">
        <el-button type="primary" @click="loadData">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-col>
    </el-row>
  </el-card>

  <!-- 监控信息区块 -->
  <el-card class="mt">
    <el-row>
      <el-col :span="6">
        <el-statistic title="累计充电量（度)" :value="268900" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="累计充电次数（次)" :value="1389" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="服务区域（个)" :value="88" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="累计效益（元)" :value="5622178" />
      </el-col>
    </el-row>
  </el-card>

  <!-- 新增按钮区块 -->
  <el-card class="mt">
    <el-button type="primary" icon="plus" @click="handleAdd">新增充电站</el-button>
  </el-card>

  <!-- 数据表格区块 -->
  <el-card class="mt">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column prop="name" label="站点名称" />
      <el-table-column prop="id" label="站点ID" />
      <el-table-column prop="city" label="所属城市" />
      <el-table-column prop="fast" label="快充数" />
      <el-table-column prop="slow" label="慢充数" />
      <el-table-column prop="status" label="充电站状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 2" type="success" size="small"
            >使用中</el-tag
          >
          <el-tag v-else-if="scope.row.status === 3" type="info" size="small"
            >空闲中</el-tag
          >
          <el-tag v-else-if="scope.row.status === 4" type="warning" size="small"
            >维护中</el-tag
          >
          <el-tag v-else-if="scope.row.status === 5" type="danger" size="small"
            >待维修</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column prop="now" label="正在充电" />
      <el-table-column prop="fault" label="故障数" />
      <el-table-column prop="person" label="站点负责人" />
      <el-table-column prop="tel" label="负责人电话" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
          <!-- 气泡确认框 组件 st -->
          <el-popconfirm
            title="确定要删除当前站点吗?"
            @confirm="handleDelete(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
          <!-- 气泡确认框 组件 end -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="mt mb fr"
      v-model:current-page="pageInfo.page"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      bakeground
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>

  <!-- 引入 stationForm 组件 -->
  <StationForm :dialogVisible="visible" @close="visible = false" @reload="loadData" />
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
// 引入 stationForm 弹框组件
import StationForm from "./components/stationForm.vue";

/**
 * 功能作用: 充电站管理 - 监控页面的站点信息数据列表展示
 * 功能描述:
 * 引入 charging station API,这是一个用于获取充电站列表数据用的
 * 引入充电站管理的 RowType 的类型定义 ,里面包含了 站点名称、ID、城市、快充数、慢充数、充电站状态等
 * 声明一个响应式 tableData 定义表格数据,用于存放接口返回的充电站数据,同时定义范型为 RowType[] 或者空数组
 * 声明一个响应式 select 定义输入框查询条件,用于决定是按名称查询还是按ID查询,默认值为 "name"
 * 声明一个响应式 totals 定义总条数,用于在分页组件上显示
 * 声明一个响应式 pageInfo 定义分页信息,包含 page(当前页码,默认:1) 和 pageSize(每页多少条数据,默认:10) 两个属性,用于在分页组件上显示
 * 声明一个响应式 formParams 定义查询参数,包含 input(输入框内容) 和 value(使用状态,默认:1) 两个属性,用于在查询时传递给接口
 * 创建一个异步函数 loadData 来加载列表数据,调用 charging station API 的 listApi 方法, 同时传递分页信息(当前页码,每页条数)、使用状态和框查询条件(决定是按名称查询还是按ID查询)
 * 获取数据,并更新 tableData(表格数据) 和 totals(总条数)
 * 在组件挂载时调用 loadData 函数,以便在页面加载时获取数据
 *
 */
// 引入 charging station API
import { listApi } from "@/api/chargingstation";
// 引入充电站管理-类型定义
import type { RowType } from "@/types/station/index";
// 定义表格数据
const tableData = ref<RowType[] | []>([]);
// 定义输入框查询条件 - 决定是按名称查询还是按ID查询
const select = ref("name");
// 定义总条数
const totals = ref<number>(0);
// 定义分页信息-
const pageInfo = reactive({
  page: 1, // 当前页码
  pageSize: 10, // 每页条数
});
// 定义查询参数 - 跟据输入框和状态选择器的值做双向绑定
const formParams = reactive({
  input: "", // 输入框内容
  value: 1, // 使用状态
});
// 创建一个异步函数来加载列表数据
const loadData = async () => {
  // 调用 API 获取数据
  const res = await listApi({
    ...pageInfo,
    status: formParams.value,
    [select.value]: formParams.input,
  });
  // 更新表格数据和总条数
  tableData.value = res.data.list || [];
  totals.value = res.data.total || 0;
};
// 在组件挂载时加载数据
onMounted(() => {
  loadData();
});

/**
 * 功能作用: 充电站管理 - 监控页面的常用按钮功能实现
 * 功能描述:
 * 创建查询重置按钮函数 handleReset,用于重置查询条件和分页信息, 清空输入框内容、状态选择器值、页码和每页条数,并重新调用 loadData 函数加载数据
 * 创建 handleSizeChange 函数,用于处理分页组件的每页条数变化事件,更新 pageInfo.pageSize 并重新加载数据
 * 创建 handleCurrentChange 函数,用于处理分页组件的页码变化事件,更新 pageInfo.page 并重新加载数据
 * 创建一个响应式变量 visible,用于控制 stationForm 组件的显示状态,默认是隐藏状态
 */
// 创建查询重置按钮函数
const handleReset = () => {
  formParams.input = "";
  formParams.value = 1;
  select.value = "name";
  pageInfo.page = 1;
  loadData();
};
const handleSizeChange = (val: number) => {
  pageInfo.pageSize = val;
  loadData();
};
const handleCurrentChange = (val: number) => {
  pageInfo.page = val;
  loadData();
};
// 控制 stationForm 组件的显示隐藏,默认是隐藏状态
const visible = ref<boolean>(false);

/**
 * 功能作用: 充电站管理 - 监控页面的编辑功能实现
 * 功能描述:
 * 1:引入 pinia 中的 useStationStore,用于获取和设置当前行数据
 * 2:声明 stationStore 变量,解构赋值 useStationStore 用于访问 pinia 中的 store
 * 3:从 pinia store 中获取 setRowData 方法,用于设置当前行
 * 4:声明 edit 方法,用于处理编辑按钮的点击事件
 * 5:在 edit 方法中,调用 setRowData 方法,将当前行数据传递给 store
 * 6:控制 stationForm 组件的显示,让其显示
 *
 * 注意:
 * 1:父组件把值传给了子组件,子组件需要通过 pinia store 来获取和设置当前行数据
 */

// 引入 pinia 中的数据
import { useStationStore } from "@/store/station";
const stationStore = useStationStore();
// 从 pinia - store 中获取 setRowData 方法,用于设置当前行数据, 获取 clearRowData 方法,用于清空 pinia 里的数据
const { setRowData, clearRowData } = stationStore;
// 编辑按钮点击事件
const edit = (row: RowType) => {
  // 调用 setRowData 方法,将当前行数据传递给 store
  setRowData(row);
  // 控制 stationForm 组件的显示
  visible.value = true;
};

/**
 * 功能作用: 充电站管理 - 监控页面的新增能实现
 * 功能描述:
 * 1: 调用 clearRowData(从 pinia -station 里取出来的) 方法,因为点击编辑后,不会清空 pinia 里的数据,所以需要在新增时清空数据
 * 2:控制 stationForm 组件的显示,让其显示
 */

// 新增充电站按钮点击事件
const handleAdd = () => {
  // 清空 store 中的 rowData,以便新增时不带入旧数据
  clearRowData();
  // 控制 stationForm 组件的显示
  visible.value = true;
};

/**
 * 功能作用: 充电站管理 - 监控页面的删除功能实现
 * 功能描述:
 * 1:引入 deleteApi 方法,用于调用删除充电站的接口
 * 2:引入 ElMessage 组件,用于提示用户删除结果
 * 3:声明 handleDelete 方法,用于处理删除按钮的点击事件
 * 4:在 handleDelete 方法中,调用 deleteApi 方法,传入要删除的充电站 ID
 * 5:在删除成功后,重新加载数据,以更新表格
 * 6:在删除失败后,提示用户删除失败
 */

import { deleteApi } from "@/api/chargingstation";
import { ElMessage } from "element-plus";
const handleDelete = async (id: string) => {
  const res = await deleteApi(id);
  if (res.code === 200) {
    ElMessage.success("删除成功");
    console.log("删除成功", res);
  }
  loadData(); // 重新加载数据
};
</script>

<style scoped lang="less"></style>
